/*-----------------------------------*/
/* Comments */
/*-----------------------------------*/

.comment-list {
  position: relative;
  margin-bottom: 26px;
}
.comment-list h2 {
  margin-bottom: 30px;
}
.link-add-comment {
  position: absolute;
  top: 11px;
  right: 0;
  color: #55AECE;
  font-size: @font-size;
  font-weight: 400;
  font-style: italic;
}
.comment-list li.comment {
  padding-left: 80px;
  position: relative;
}
.comment-body {
  background: url(images/comment-bg.png) repeat;
  .border-radius(@border-radius);
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-bottom:22px;
  border-top: 1px solid #585C64;
}
.comment-body .inner {
  padding: 19px 15px 17px;
  .border-radius(@border-radius);
  background: url();
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(100%,rgba(0,0,0,0.1)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(0,0,0,0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14ffffff', endColorstr='#14000000',GradientType=0 );
}

.comment-avatar {
  position: absolute;
  top: 0;
  left: -80px;
  z-index: 0;
}
.comment-avatar .avatar {
  .border-radius(@border-radius * 0.6);
  -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.30), inset 1px 1px 2px rgba(255, 255, 255, 0.2);
  -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.30), inset 1px 1px 2px rgba(255, 255, 255, 0.2);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.30), inset 1px 1px 2px rgba(255, 255, 255, 0.2);
  border:1px solid #101419;
  width: 58px;
  overflow: hidden;
}
.comment-avatar img {
  display: block;
  width: 58px;
  position: relative;
  z-index: -1;
  .border-radius(@border-radius * 0.6);
}
.comment-arrow{
  width: 7px;
  height: 9px;
  position: absolute;
  top:14px;
  left:-7px;
  z-index: 2;
  background: url(images/comment_arrow.png) no-repeat;
}
.comment-author {
  margin-bottom: 5px;
  text-align: right;
  color: #fff;
  font-size: @font-size - 2;
  font-weight: 400;
}
.link-author {
  font-size: @font-size * 1.15;
  text-decoration: none;
  float: left;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  position: relative;
  top:-4px;
}
.link-reply {
  color: #fff;
  padding-right: 2px;
}
.comment-entry {
  font-size: @font-size - 1;
  line-height:20px;
}

/* Responsive */
@media (max-width:479px){
    .link-add-comment {
        top: 30px;
        left: 0;
        right: auto;
    }
    .comment-body .inner {
        padding-left:10px;
        padding-right:10px;
    }
}